<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Animated Buttons with CSS3</title>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Animated Buttons with CSS3" />
        <meta name="keywords" content="css3, transitions, button, animation, hover, effect, icon, call-to-action, active" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/style7.css" />
        <link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <div class="container">
            <div class="header">
                <a href="http://tympanus.net/Tutorials/OriginalHoverEffects/"><strong>&laquo; Previous Demo: </strong>Original Hover Effects</a>
                <span class="right">
                    <a href="http://www.webiconset.com/" target="_blank">Icons by webiconset.com</a>
                    <a href="http://www.justbenicestudio.com/studio/websymbols/" target="_blank">Font/Icons by Just Be Nice</a>
                    <a href="http://tympanus.net/codrops/2011/11/07/animated-buttons-with-css3/"><strong>Back to the Codrops Article</strong></a>
                </span>
                <div class="clr"></div>
            </div>
            <h1>Animated Buttons <span>with CSS3 Transitions and Animations</span></h1>
            <div class="more">
                <ul>
                    <li><a href="index.html">Demo 1</a></li>
                    <li><a href="index2.html">Demo 2</a></li>
                    <li><a href="index3.html">Demo 3</a></li>
                    <li><a href="index4.html">Demo 4</a></li>
                    <li><a href="index5.html">Demo 5</a></li>
                    <li><a href="index6.html">Demo 6</a></li>
                    <li class="selected"><a href="index7.html">Demo 7</a></li>
                </ul>
            </div>
            <div class="content">
				<div class="button-wrapper">
					<a href="#" class="a-btn">
						<span class="a-btn-symbol">J</span>
						<span class="a-btn-text">Download Now</span> 
						<span class="a-btn-slide-text">Windows Vista / Windows 7</span>
					</a>
					<a href="#" class="a-btn">
						<span class="a-btn-symbol">i</span>
						<span class="a-btn-text">Download Now</span> 
						<span class="a-btn-slide-text">Windows Vista / Windows 7</span>
					</a>
					<a href="#" class="a-btn">
						<span class="a-btn-symbol">X</span>
						<span class="a-btn-text">Download Now</span> 
						<span class="a-btn-slide-text">Windows Vista / Windows 7</span>
					</a>
					<a href="#" class="a-btn">
						<span class="a-btn-symbol">w</span>
						<span class="a-btn-text">Download Now</span> 
						<span class="a-btn-slide-text">Windows Vista / Windows 7</span>
					</a>
				</div>
            </div>
        </div>
    </body>
</html>